import {useEffect, useState} from 'react';
import {Avatar, Button, List, Skeleton} from 'antd';
import {ArrowRightOutlined} from "@ant-design/icons";

interface DataType {
  gender?: string;
  name: {
    title?: string;
    first?: string;
    last?: string;
  };
  email?: string;
  picture: {
    large?: string;
    medium?: string;
    thumbnail?: string;
  };
  nat?: string;
  loading: boolean;
}

const count = 3;
const fakeDataUrl = `https://randomuser.me/api/?results=${count}&inc=name,gender,email,nat,picture&noinfo`;

export default () => {

  const [initLoading, setInitLoading] = useState(true);
  const [loading, setLoading] = useState(false);
  const [data, setData] = useState<DataType[]>([]);
  const [list, setList] = useState<DataType[]>([]);
  const [activityKey, setActivityKey] = useState(0);

  useEffect(() => {
    fetch(fakeDataUrl)
      .then((res) => res.json())
      .then((res) => {
        setInitLoading(false);
        setData(res.results);
        setList(res.results);
      });
  }, []);

  const onLoadMore = () => {
    setLoading(true);
    setList(
      data.concat([...new Array(count)].map(() => ({loading: true, name: {}, picture: {}}))),
    );
    fetch(fakeDataUrl)
      .then((res) => res.json())
      .then((res) => {
        const newData = data.concat(res.results);
        setData(newData);
        setList(newData);
        setLoading(false);
        // Resetting window's offsetTop so as to display react-virtualized demo underfloor.
        // In real scene, you can using public method of react-virtualized:
        // https://stackoverflow.com/questions/46700726/how-to-use-public-method-updateposition-of-react-virtualized
        window.dispatchEvent(new Event('resize'));
      });
  };

  const loadMore =
    !initLoading && !loading ? (
      <div
        style={{
          textAlign: 'center',
          marginTop: 12,
          height: 32,
          lineHeight: '32px',
        }}
      >
        <Button onClick={onLoadMore}>loading more</Button>
      </div>
    ) : null;


  return <List
    className="demo-loadmore-list"
    loading={initLoading}
    itemLayout="horizontal"
    loadMore={loadMore}
    dataSource={list}
    renderItem={(item, index) => (
      <List.Item
        className={['!px-10 cursor-pointer', index === activityKey ? 'bg-blue-400 !text-white' : ''].join(' ')}
        onClick={() => {
          setActivityKey(index)
        }}
      >
        <Skeleton avatar title={false} loading={item.loading} active>
          <List.Item.Meta
            avatar={<Avatar src={item.picture.large}/>}
            title={<span
              className={[index === activityKey ? '!text-white' : '', 'text-xs'].join(' ')}>{'173 **** 331' || item.name?.last}</span>}
            description={<span className={[index === activityKey ? '!text-white' : '', 'text-xs'].join(' ')}>正常结束 00:00</span>}
          />
          <div>
            <div>17:59</div>
            <div><ArrowRightOutlined/></div>
          </div>
        </Skeleton>
      </List.Item>
    )}
  />
}
